<script setup lang="ts">
import '../../assets/icon/iconfont.js'
import { onMounted, watch } from 'vue';
import { useArticle } from '@/hooks/articleHook';
import { useRouter } from 'vue-router';
import ArticleCar1 from './car/articleCar1.vue';
import Empty from '@/components/common/empty.vue';
import { useCountStore } from '@/stores/count';
const router = useRouter();

const {
  getArticle,
  articleList, //文章列表
  articlCount, //文章总数
} = useArticle(); //管理标签选择

const props = defineProps({
  pageSize: {
    type: Number,
    default: 4,
  },
  state: {
    type: Number,
    default: 1,//1表示已发布，0表示未发布

  },
  subsetId: {
    type: Number,
    default: -1,//-1表示全部

  },
  searchTerm: {
    type: String,
    default: '',
  },
  //是否为网格布局
  isGrid: {
    type: Boolean,
    default: true,
  },
  isChangeSmall: {
    type: Boolean,
    default: false, // 是否使用小尺寸布局
  },
})

//文章详情
const articleMore = () => {
  router.push({ path: '/article' })
}



const request = {
  pageSize: props.pageSize,
  nowPage: 1,
  state: props.state,
  subset_id: props.subsetId,
  searchTerm: props.searchTerm,
  classify: 0,//0表示文章，1表示图库
  count: true,
}

const countStore = useCountStore();
// 监听文章总数变化
watch(() => articlCount.value, (newCount) => {
  countStore.articleCount =newCount;
  console.log(countStore.articleCount);
});


onMounted(() => {
  getArticle(request);
})


</script>

<template>
  <!-- 这个盒子是为了给顶部的justify-between空间 -->
  <div class="sm:w-[300px] 
  md:w-[400px] 
  lg:w-[640px] 
  xl:w-[1300px]">
    <!-- 顶部 -->
    <div class="flex items-center justify-between border-b border-dashed border-gray-300 mb-5">
      <div class="flex items-center">
        <svg class="icon--large" aria-hidden="true">
          <use xlink:href="#icon-wenzhangzhuanqu"></use>
        </svg>
        <h1 class="text-xl font-semibold text-gray-500"> 最新文章</h1>
      </div>
      <div class="flex items-center">
        <svg class="icon--large" aria-hidden="true">
          <use xlink:href="#icon-quanbu"></use>
        </svg>
        <h1 class="text-xl font-semibold text-gray-500 hover:text-lime-400" @click="articleMore"> Mroe</h1>
      </div>
    </div>
    <div class="w-full flex justify-center items-center ">
      <!-- 判断 -->
      <div class=" grid gap-x-4" :class="props.isGrid ? 'grid-cols-2' : 'grid-cols-1'">
        <!-- 文章卡片一 -->
        <ArticleCar1 :articleList="articleList" />
        <!-- 暂无数据 -->

      </div>
      <div v-if="articleList.length === 0">
        <Empty />
      </div>
    </div>
  </div>
</template>

<style scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.icon--large {
  width: 2em;
  height: 2em;
}
</style>
